<template>
  <uni-popup ref="popupRef" :is-mask-click="false" mask-background-color="rgba(0,0,0,0)" :type="props.type" :animation="false">
    <view class="u-center" :style="props.styleAtt">
      <view class="popup-toast">
        <view class="title" v-if="props.title">{{props.title}}</view>
        <view class="" v-if="props.content">{{props.content}}</view>
        <slot></slot>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref, onBeforeUnmount } from 'vue'
const popupRef = ref(null)
const timer = ref(null)
const props = defineProps({
  title: {
    type: String,
    default: '提示'
  },
  content: {
    type: String
  },
  type: {
    type: String,
    default: 'center'
  },
  styleAtt: {
    type: Object,
    default: () => {}
  }
})

const show = () => {
  popupRef.value.open()
  timer.value = setTimeout(() => {
    popupRef.value.close()
  }, 2000)
}
onBeforeUnmount(() => {
  timer.value = null
})
// 暴露给父组件
defineExpose({
  show
})
</script>

<style scoped lang="scss">
.popup-toast{
  width: 580rpx;
  padding: 20rpx;
  background: rgba(0,0,0,0.6);
  border-radius: 12rpx;
  text-align: center;
  font-size: 28rpx;
  color: #ffffff;
  .title{
    font-size: 30rpx;
    height: 42rpx;
    line-height: 42rpx;
    margin-bottom: 14rpx;
  }
}
</style>
